<template>
  <a-card style="height: 100%;position: relative" class="pageView">
    <a-space direction="vertical" size="middle" style="float: right;position: absolute;top: 20px;right: 20px;">
      <a-card hoverable class="linkCard" :bodyStyle="{ padding: '12px 16px', height: '100%' }"
              @click="toLink('https://flk.npc.gov.cn/')">
        <img slot="cover" src="~@/assets/zsk/sjk.png"
        />
        <a-card-meta>
          <div slot="description" class="link-card-content">
            国家法律法规数据库
            <a-icon type="double-right" />
          </div>
        </a-card-meta>
      </a-card>
      <a-card hoverable class="linkCard" :bodyStyle="{ padding: '12px 16px', height: '100%' }"
              @click="toLink('https://www.gov.cn/zhengce/zhengcewenjianku/index.htm')">
        <img slot="cover" src="~@/assets/zsk/wjk.png"
        />
        <a-card-meta>
          <div slot="description" class="link-card-content">
            国务院政策文件库
            <a-icon type="double-right" />
          </div>
        </a-card-meta>
      </a-card>
      <a-card hoverable class="linkCard" :bodyStyle="{ padding: '12px 16px', height: '100%' }"
              @click="toLink('https://pubscholar.cn/')">
        <img slot="cover" src="~@/assets/zsk/gyxs.png"
        />
        <a-card-meta>
          <div slot="description" class="link-card-content">
            公益学术平台
            <a-icon type="double-right" />
          </div>
        </a-card-meta>
      </a-card>
    </a-space>
    <div class="box1" v-if="queryParam.keyWord ===''">
      <p style="margin-bottom:55px;color:#0168b7;text-align: center;font-size: 35px">审计知识库</p>
      <a-input-search
        placeholder="请输入关键字"
        size="large"
        @search="onSearch">
        <a-button icon="search" slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
    </div>
    <div class="box2" v-else>
      <a-input-group compact>
        <j-dict-select-tag style="width:150px" size="large" v-model="queryParam.tab" placeholder="请选择" :showDefaultSelect="false"
                           dict-code="sj_senior_type"  @selectChange="getData"/>
        <a-input-search
          size="large"
          v-model="queryParam.keyWord"
          style="width: 40%"
          placeholder="请输入关键字"
          @search="onSearch">
          <a-button icon="search" slot="enterButton">
            搜索
          </a-button>
        </a-input-search>
      </a-input-group>

      <div class="searchView">
<!--        <a-radio-group v-model="queryParam.cate" @change="getData" button-style="solid">
          <a-radio-button value="">
            全部
          </a-radio-button>
          <a-radio-button value="1">
            国家
          </a-radio-button>
          <a-radio-button value="2">
            股份公司
          </a-radio-button>
          <a-radio-button value="3">
            本公司
          </a-radio-button>
        </a-radio-group>-->
        <a-divider class="divider">搜索结果</a-divider>
        <a-spin :spinning="loading" size="large">
          <ul class="list">
            <li v-for="(item,index) in dataSource" :key="index">
              <div style="margin: 15px;text-align: left">
                <a @click="onTitle(item)" style="font-size: 20px">{{ item.title }}</a>
                <div style="margin: 10px 0;font-size: 18px;width: 100%;height: 80px;overflow: hidden"
                     v-html="changeKeyRed(item.contentShow,keyWord)" />
                <div style="color: #bab8b8;font-size: 16px;">{{ item.updateTime }}</div>
              </div>
            </li>
          </ul>
          <a-pagination style="margin-top: 35px"
                        v-model="pageNo"
                        :pageSize="pageSize"
                        @change="onPageChange"
                        :total="total" />
        </a-spin>
      </div>
    </div>
    <contentView ref="contentView"></contentView>
  </a-card>
</template>

<script>

import contentView from './contentView'
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'sjzsjs',
  components: {
    contentView
  },
  data() {
    return {
      queryParam: {
        keyWord: '',
        tab: '-1',
        cate: ''
      },
      pageNo: 1,
      pageSize: 10,
      keyWord: '',
      loading: false,
      total: 0,
      dataSource: [],
      url: '/common/knowledgeCommon/getSearchAll',
      modelShow: false
    }
  },
  methods: {
    onSearch(val) {
      this.queryParam.keyWord = val
      this.keyWord = val
      this.getData()
    },
    onPageChange(page) {
      this.pageNo = page
      this.getData()
    },
    onTitle(data) {
      this.$refs.contentView.show(data)
    },
    getData() {
      this.loading = true
      getAction(this.url, {
        ...this.queryParam,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.total = res.result.total
          }
        } else {
          console.log(res)
        }
        this.loading = false
      })
    },
    changeKeyRed(str, keyWord) {
      if (str != null && keyWord != null) {
        var substr = '/' + keyWord + '/g'
        var replaceStr = str.replace(eval(substr), '<span style=\'color:red;font-weight:bold\'>' + keyWord + '</span>')
        return replaceStr
      } else {
        return str
      }
    },
    toLink(url) {
      window.open(url)
    }
  }
}
</script>

<style scoped>
.divider::after, .divider::before {
  border-top: 1px solid #a8d7ff !important;
}

.divider {
  color: #3498db;
}

.pageView {
  background: url(~@/assets/search-view.png) no-repeat;
  background-size: 100% 100%;
}

.searchView {
  width: 80%;
  padding: 25px 20px 20px 20px;
  margin: 0 auto;
}

.searchView .list {
  overflow: auto;
  height: calc(100vh - 405px)
}

ul, li {
  list-style: none;
  text-decoration: none;
  padding: 0;
}

li {
  border-bottom: 1px dashed #c2c2c2;
}

.box1 {
  width: 550px;
  height: 100px;
  position: absolute;
  top: -45%;
  right: 230px;
  bottom: 0;
  left: 0;
  margin: auto;
}

.box2 {
  padding-top: 20px;
  width: 100%;
  height: 100px;
  text-align: center;
  padding-right: 230px;
}

.linkCard {
  width: 220px;

  .link-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }
}
</style>